import * as React from 'react';
import {
  RasterLayer,
  Scene,
  LineLayer,
  ILayer,
  PointLayer,
  PolygonLayer,
  Source,
  Popup,
} from '@antv/l7';
import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
let GDP = {
  上海市: '43214.85',
  北京市: '40269.6',
  深圳市: '30664.85',
  广州市: '28200',
  重庆市: '27894.02',
  苏州市: '22718.3',
  成都市: '19917',
  杭州市: '18109',
  武汉市: '17716.76',
  南京市: '16355.32',
  天津市: '15695.05',
  宁波市: '14594.9',
  青岛市: '14136.46',
  无锡市: '14003.24',
  长沙市: '13270.7',
  郑州市: '12691',
  佛山市: '12156.54',
  济南市: '11432.2',
  合肥市: '11412.8',
  福州市: '11324.48',
  泉州市: '11304.17',
  南通市: '11026.9',
  东莞市: '10855.35',
  西安市: '10688.28',
  常州市: '8807.6',
  烟台市: '8711.75',
  唐山市: '8230.6',
  徐州市: '8117.44',
  温州市: '7585',
  沈阳市: '7249.7',
  厦门市: '7033.89',
  大连市: '7030.4',
  潍坊市: '7010.6',
  绍兴市: '6795',
  昆明市: '6733.79',
  扬州市: '6696.43',
  南昌市: '6650.53',
  长春市: '6638.03',
  盐城市: '6617.4',
  石家庄市: '6490.3',
  嘉兴市: '6355.28',
  泰州市: '6025.26',
  台州市: '5786.19',
  临沂市: '5465.5',
  洛阳市: '5447.1',
  榆林市: '5435.18',
  金华市: '5355.44',
  哈尔滨市: '5351.7',
  襄阳市: '5309.43',
  太原市: '5121.61',
  南宁市: '5120.94',
  济宁市: '5070',
  漳州市: '5025.4',
  宜昌市: '5022.69',
  惠州市: '4977.36',
  镇江市: '4763.42',
  鄂尔多斯市: '4715.7',
  贵阳市: '4711.04',
  淮安市: '4550.13',
  岳阳市: '4402.98',
  南阳市: '4342.22',
  芜湖市: '4302.63',
  淄博市: '4200.6',
  遵义市: '4169.9',
  赣州市: '4169.37',
  沧州市: '4163.4',
  邯郸市: '4114.8',
  常德市: '4054.1',
  菏泽市: '3976.67',
  珠海市: '3881.75',
  衡阳市: '3840.31',
  九江市: '3735.68',
  连云港市: '3727.92',
  宿迁市: '3719.01',
  茂名市: '3698.1',
  许昌市: '3655.4',
  湖州市: '3644.9',
  江门市: '3601.28',
  中山市: '3566.17',
  湛江市: '3559.93',
  廊坊市: '3553.1',
  周口市: '3496.23',
  德州市: '3488.72',
  威海市: '3463.93',
  东营市: '3441.72',
  株洲市: '3420.3',
  新疆生产建设兵团: '3395.61',
  曲靖市: '3393.91',
  滁州市: '3362.1',
  保定市: '3353.3',
  绵阳市: '3350.29',
  乌鲁木齐市: '3337.32',
  包头市: '3293',
  新乡市: '3232.53',
  兰州市: '3231.29',
  宜春市: '3191.28',
  宁德市: '3151.08',
  宜宾市: '3148.08',
  呼和浩特市: '3121.4',
  驻马店市: '3082.82',
  龙岩市: '3081.78',
  阜阳市: '3071.5',
  信阳市: '3064.96',
  柳州市: '3057.24',
  上饶市: '3043.5',
  泰安市: '2996.7',
  三明市: '2953.47',
  汕头市: '2929.87',
  商丘市: '2925.33',
  莆田市: '2882.96',
  滨州市: '2872.11',
  郴州市: '2770.08',
  荆州市: '2715.52',
  平顶山市: '2694.16',
  伊犁哈萨克自治州: '2667.18',
  安庆市: '2656.88',
  德阳市: '2656.56',
  肇庆市: '2649.99',
  聊城市: '2642.52',
  大庆市: '2620',
  南充市: '2601.98',
  咸阳市: '2581.32',
  开封市: '2557.03',
  宝鸡市: '2548.71',
  湘潭市: '2548.3',
  黄冈市: '2541.31',
  吉安市: '2525.65',
  邵阳市: '2461.5',
  马鞍山市: '2439.33',
  安阳市: '2435.5',
  红河哈尼族彝族自治州: '2417.48',
  泸州市: '2406.08',
  玉溪市: '2352.3',
  达州市: '2351.7',
  长治市: '2311.1',
  桂林市: '2311.06',
  揭阳市: '2265.43',
  银川市: '2262.95',
  永州市: '2261.08',
  日照市: '2211.96',
  乐山市: '2205.15',
  邢台市: '2200.4',
  孝感市: '2193.55',
  毕节市: '2181.48',
  宿州市: '2167.67',
  十堰市: '2163.98',
  焦作市: '2123.6',
  荆门市: '2120.86',
  南平市: '2117.58',
  渭南市: '2087.21',
  吕梁市: '2071.37',
  玉林市: '2070.61',
  益阳市: '2019.27',
  清远市: '2007.4',
  延安市: '2004.58',
  蚌埠市: '1988.97',
  赤峰市: '1975.1',
  亳州市: '1972.7',
  枣庄市: '1951.57',
  六安市: '1923.5',
  临汾市: '1909.5',
  凉山彝族自治州: '1901.18',
  鞍山市: '1888.1',
  衢州市: '1875.61',
  秦皇岛市: '1843.76',
  晋中市: '1843.4',
  宣城市: '1833.9',
  娄底市: '1825.76',
  怀化市: '1817.8',
  抚州市: '1794.55',
  海口市: '1791.58',
  濮阳市: '1771.54',
  汉中市: '1768.72',
  咸宁市: '1751.82',
  黔南布依族苗族自治州: '1747.41',
  张家口市: '1727.8',
  漯河市: '1721.1',
  丽水市: '1710.03',
  衡水市: '1703.1',
  昌吉回族自治州: '1698.21',
  承德市: '1697',
  大同市: '1686',
  运城市: '1643.6485',
  黄石市: '1641.32',
  大理白族自治州: '1633',
  楚雄彝族自治州: '1608.12',
  自贡市: '1601.31',
  三门峡市: '1582.54',
  百色市: '1568.71',
  阿克苏地区: '1564.54',
  韶关市: '1553.93',
  眉山市: '1547.87',
  遂宁市: '1519.87',
  阳江市: '1515.86',
  舟山市: '1512.1',
  六盘水市: '1473.65',
  内江市: '1465.88',
  铜仁市: '1462.65',
  昭通市: '1462.06',
  淮南市: '1457.1',
  吉林市: '1452.6',
  晋城市: '1425.7166',
  广安市: '1417.8',
  通辽市: '1411.44',
  营口市: '1403.2',
  钦州市: '1387.96',
  盘锦市: '1383.2',
  西宁市: '1373',
  呼伦贝尔市: '1354.8',
  黔西南布依族苗族自治州: '1353.4',
  贵港市: '1352.73',
  忻州市: '1344.4',
  梅州市: '1308.01',
  恩施土家族苗族自治州: '1302.36',
  喀什地区: '1298.98',
  文山壮族苗族自治州: '1298.77',
  汕尾市: '1288.04',
  北海市: '1276.91',
  河源市: '1273.99',
  黔东南苗族侗族自治州: '1255.03',
  潮州市: '1244.85',
  随州市: '1241.45',
  齐齐哈尔市: '1224.5',
  淮北市: '1223',
  安康市: '1209.49',
  绥化市: '1177.7',
  铜陵市: '1165.6',
  保山市: '1165.5',
  鄂州市: '1162.3',
  新余市: '1154.6',
  锦州市: '1148.3',
  鹰潭市: '1143.92',
  云浮市: '1138.97',
  广元市: '1116.25',
  萍乡市: '1108.3',
  巴音郭楞蒙古自治州: '1106.29',
  朔州市: '1100.4929',
  梧州市: '1081.34',
  安顺市: '1078.91',
  克拉玛依市: '1072.1',
  鹤壁市: '1064.64',
  河池市: '1041.97',
  攀枝花市: '1040.82',
  普洱市: '1029.15',
  锡林郭勒盟: '1014.74',
  池州市: '1004.2',
  巴彦淖尔市: '982.7',
  黄山市: '957.4',
  景德镇市: '957.1364',
  朝阳市: '944.8',
  阳泉市: '916.6',
  临沧市: '908.48',
  乌兰察布市: '903.6',
  庆阳市: '885.27',
  牡丹江市: '875',
  抚顺市: '870.1',
  丹东市: '854.4',
  商洛市: '852.29',
  葫芦岛市: '841.7',
  雅安市: '840.56',
  辽阳市: '837.7',
  三亚市: '835.37',
  来宾市: '832.88',
  塔城地区: '825.31',
  佳木斯市: '816.2',
  防城港市: '815.88',
  本溪市: '810.4',
  崇左市: '809',
  资阳市: '807.5',
  湘西土家族苗族自治州: '792.11',
  酒泉市: '762.7',
  吴忠市: '762.47',
  贺州市: '753.95',
  松原市: '752.88',
  天水市: '750.33',
  巴中市: '742.51',
  哈密市: '727.14',
  延边朝鲜族自治州: '726.86',
  乌海市: '718.66',
  铁岭市: '716',
  海西蒙古族藏族自治州: '713.78',
  拉萨市: '678.16',
  西双版纳傣族自治州: '676.1528',
  黑河市: '637.1',
  石嘴山市: '617.03',
  兴安盟: '601.79',
  武威市: '600.2',
  张家界市: '580.3',
  德宏傣族景颇族自治州: '575.54',
  鸡西市: '572.4',
  白银市: '571.02',
  丽江市: '570.49',
  平凉市: '553.97',
  白山市: '541.41',
  通化市: '531.7',
  四平市: '526.6',
  张掖市: '526.23',
  海东市: '514.6',
  白城市: '510.18',
  中卫市: '504.73',
  阜新市: '504.6',
  陇南市: '502.5',
  定西市: '500.76',
  双鸭山市: '493.9',
  和田地区: '456.72',
  阿坝藏族羌族自治州: '449.63',
  博尔塔拉蒙古自治州: '448.03',
  甘孜藏族自治州: '447.04',
  铜川市: '439.41',
  吐鲁番市: '433.35',
  辽源市: '429.9',
  金昌市: '428.61',
  儋州市: '395.33',
  固原市: '375.13',
  临夏回族自治州: '373.8',
  阿拉善盟: '363.6',
  日喀则市: '348.26',
  鹤岗市: '340.2',
  阿勒泰地区: '334.53',
  嘉峪关市: '326.5',
  伊春市: '318.6933',
  迪庆藏族自治州: '293.2715',
  昌都市: '252.89',
  山南市: '237.27',
  怒江傈僳族自治州: '234.11',
  甘南藏族自治州: '230.04',
  林芝市: '209.01',
  七台河市: '206.4',
  海南藏族自治州: '181.6',
  那曲市: '171.41',
  克孜勒苏柯尔克孜自治州: '169.24',
  大兴安岭地区: '153.1',
  黄南藏族自治州: '110.45',
  海北藏族自治州: '100.4',
  阿里地区: '70.67',
  玉树藏族自治州: '63.6',
  果洛藏族自治州: '48.9',
  台湾省: '49583',
  澳门特别行政区: '1929',
  香港特别行政区: '23740',
  天门市: '718.89',
  仙桃市: '929.9',
  潜江市: '930',
  济源市: '762.23',
  神农架林区: '35',
  昌江黎族自治县: '143.74',
  东方市: '215.03',
  乐东黎族自治县: '174.25',
  白沙黎族自治县: '62.57',
  五指山市: '36.76',
  保亭黎族苗族自治县: '63.16',
  临高县: '222.91',
  澄迈县: '400.81',
  屯昌县: '96.79',
  定安县: '117.64',
  文昌市: '308.73',
  琼中黎族苗族自治县: '66.32',
  万宁市: '276.03',
  陵水黎族自治县: '223.39',
  琼海市: '337.87',
  三沙市: '18',
  可克达拉市: '210.6',
  双河市: '82.9',
  北屯市: '73',
  胡杨河市: '213.9',
  石河子市: '562',
  铁门关市: '135.4',
  五家渠市: '320',
  阿拉尔市: '332',
  图木舒克市: '196.6',
  昆玉市: '31.4',
};

function getColor(num: number) {
  if (num > 20000) {
    return '#67001f';
  } else if (num > 10000) {
    return '#980043';
  } else if (num > 8000) {
    return '#ce1256';
  } else if (num > 6000) {
    return '#e7298a';
  } else if (num > 4000) {
    return '#df65b0';
  } else if (num > 2000) {
    return '#c994c7';
  } else if (num > 1000) {
    return '#d4b9da';
  } else if (num > 500) {
    return '#e7e1ef';
  } else {
    return ' #f7f4f9';
  }
}

export default class RasterTile extends React.Component {
  private scene: Scene;

  public componentWillUnmount() {
    this.scene.destroy();
  }

  public async componentDidMount() {
    this.scene = new Scene({
      id: 'map',
      stencil: true,
      map: new GaodeMap({
        // map: new Mapbox({
        // center: [121.268, 30.3628],
        // center: [122.76391708791607, 43.343389123718815],
        center: [120, 29],
        // style: 'normal',
        style: 'light',
        zoom: 5,
        zooms: [4, 19],
        // zoom: 13,
        // center: [-122.447303, 37.753574],
      }),
    });

    this.scene.on('loaded', () => {
      const tileSource = new Source(
        'http://localhost:3000/file.mbtiles/{z}/{x}/{y}.pbf',
        // 'http://localhost:3000/zhejiang.mbtiles/{z}/{x}/{y}.pbf',
        {
          parser: {
            type: 'mvt',
            tileSize: 256,
            zoomOffset: 0,
            maxZoom: 9,
            extent: [-180, -85.051129, 179, 85.051129],
          },
        },
      );

      const linelayer = new LineLayer({
        zIndex: 1,
        featureId: 'NAME_CHN',
        sourceLayer: 'city', // woods hillshade contour ecoregions ecoregions2 city
      })
        .source(tileSource)
        .color('#f00')
        .size(0.5);
      this.scene.addLayer(linelayer);

      const polygonlayer = new PolygonLayer({
        featureId: 'NAME_CHN',
        sourceLayer: 'city', // woods hillshade contour ecoregions ecoregions2 city
      })
        .source(tileSource)
        .color('NAME_CHN', (v: any) => {
          let c = '#000';
          // @ts-ignore
          if (GDP[v]) {
            // @ts-ignore
            c = getColor(+GDP[v]);
          } else {
            console.log('**** not exist', v);
          }
          return c;
        })
        .style({
          opacity: 0.8,
        })
        .active(true);
      this.scene.addLayer(polygonlayer);

      polygonlayer.on('mousemove', (e) => {
        const { feature, lngLat } = e;

        if (lngLat && feature.properties?.NAME_CHN) {
          const popup = new Popup({
            offsets: [0, 0],
            closeButton: false,
          });
          popup
            .setLnglat(lngLat)
            // @ts-ignore
            .setHTML(
              `<span>${feature.properties.NAME_CHN} 2021 GDP</span></br><span>${
                // @ts-ignore
                GDP[feature.properties.NAME_CHN]
              } 亿</span>`,
            );

          this.scene.addPopup(popup);
        }
      });
    });
  }

  public render() {
    return (
      <>
        <div
          id="map"
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
          }}
        />
      </>
    );
  }
}
